<template>
  <table class="tb">
    <tbody>
      <tr>
        <td class="td-name">颜色</td>
        <td class="td-data">
          <el-color-picker v-model="element.getElement().strokeColor"></el-color-picker>
        </td>
      </tr>
      <tr v-if="element.getElement().fillColor">
        <td class="td-name">填充颜色</td>
        <td class="td-data">
          <el-color-picker v-model="element.getElement().fillColor"></el-color-picker>
        </td>
      </tr>
      <tr v-if="element.getElement().fillOpacity">
        <td class="td-name">透明度</td>
        <td class="td-data">
          <el-select v-model="element.getElement().fillOpacity" placeholder="请选择">
            <el-option v-for="item in fillOpacitySelect" :key="item.key" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td class="td-data" colspan="2">
          <el-switch v-model="editIsOriginal" active-text="原始数据" inactive-text="数据框"></el-switch>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <div v-if="editIsOriginal">
            <textarea ref="PolygonPath" rows="5" v-model="Path" class="el-textarea"></textarea>
          </div>
          <div v-else>
            <EditPositions :positions="element.getElement().path"></EditPositions>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script lang="ts" setup>
import { ref, computed, Ref } from 'vue';
import { useEditElementStore } from '@/stores/map/mapInEditor'; // 假设 Pinia store 路径
import EditPositions from "@/views/map/dialog/MapEditElement/EditOption/EditPositions.vue";

// 获取 Pinia store 实例
const editElementStore = useEditElementStore();

// 从 store 中获取状态
const element = computed(() => editElementStore.element);
const fillOpacitySelect = computed(() => editElementStore.fillOpacitySelect);
const path = computed(() => editElementStore.path);

// 定义本地状态
const editIsOriginal: Ref<boolean> = ref(true);
const PolygonPath: Ref<HTMLTextAreaElement | null> = ref(null);

// 计算属性 Path
const Path = computed<string>({
  get() {
    return JSON.stringify(path.value);
  },
  set(newValue: string) {
    try {
      const opt = JSON.parse(newValue);
      editElementStore.setPath(opt);
    } catch (error) {
      console.error('JSON 解析错误:', error);
    }
  }
});
</script>

<style scoped></style>